<template>
  <div class="home" ref="homes" @scroll="getScroll">
    <!-- 顶部 -->
    <div class="top">
      <!-- 顶部搜索栏 -->
      <IndexSearch></IndexSearch>
    </div>
    <!-- 中间内容 -->
    <div class="center">
      <div class="center-top">
        <!-- 轮播图1 父传子 Swipe-->
        <Swipe :swipeList='swipeList'></Swipe>
      </div>
      <!-- 轮播图2  swipeTwoList -->
      <SwipeTwo :swipeTwoList='swipeTwoList'></SwipeTwo>

      <!-- 秒杀 -->
      <Seckill></Seckill>
      <!-- 滑块 -->
      <Slider :sliderList='sliderList'></Slider>
      
      <!-- 首页分类列表 -->
      <indexClass :classList="classList"></indexClass>
      <!-- 回到顶部 -->
      <BackTop v-if="scrollTopS > 100" @backTop='fbackTop'></BackTop>
    </div>
    <!-- 底部 -->
      <!-- <Footer v-if='path== "/" ||path=="/cart" ||path=="/proclass"' :indexS="indexs"></Footer> -->
  </div>
</template>

<script>
import IndexSearch from "./IndexSearch.vue";  //顶部搜索框
import Swipe from "../../components/Swipe.vue"; //轮播图1
import SwipeTwo from "../../components/SwipeTwo.vue"; //轮播图2
import Seckill from '../../components/Seckill.vue'; //秒杀
import Slider from '../../components/Slider.vue'; //滑块
// import Footer from "../../heightComponent/Foot/footer.vue"; //底部组件
import indexClass from '@/components/indexClass.vue'  //首页分类列表
import BackTop from '@/components/BackTop.vue' //回到顶部
import { indexSlider, indexSwipe,indexSwipeTwo,indexC} from "../../http/api/Home"; //请求
export default {
    data(){
        return{
            swipeList:[], //轮播图1
            swipeTwoList:[], //轮播图2
            sliderList:[],//滑块
            classList:[],//分类列表
            scrollTopS: 0,
            indexs:0, //底部导航样式初始值
        }
    },
    
  components: {
    IndexSearch,
    Swipe,
    SwipeTwo,
    Seckill,
    // Footer,
    Slider,
    indexClass,
    BackTop
  },
  created(){
    this.getSwipe(),
    this.getSwipeTwo(),
    this.getSlider(),
    this.getClass()
  },
  methods:{
    //发送请求 轮播图1数据
    getSwipe(){
        indexSwipe('/indexSwipe').then(res=>{
            this.swipeList = res.swipeList
            // console.log(res);
        })
    },
    //发送请求 轮播图2数据
    getSwipeTwo(){
        indexSwipeTwo('/IndexswipeTwo').then(res=>{
            this.swipeTwoList = res.Swipelist
            // console.log(this.swipeTwoList);
        })
    },
    // 滑块数据
    getSlider(){
      indexSlider('/IndexSlider').then(res=>{
        this.sliderList = res.List
        // console.log(res);
      })
    },
    //分类数据
    getClass(){
      indexC('/indexClass').then(res=>{
        this.classList = res.List
        // console.log(res.List);
      })
    },
    // 滚动距离
    getScroll(){
      this.scrollTopS = this.$refs.homes.scrollTop;
    },
    //点击回到顶部
    fbackTop(){
      this.$refs.homes.scrollTop = 0;
      this.scrollTopS = 0;
    },
  }
};
</script>

<style scoped lang='scss'>
.home{
  height: 100%;
  overflow-y:scroll ;
  .top {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
}
.center-top {
  height: 250px;
  width: 100%;
  background: red;
  border-radius: 0 0 100px 100px;
   position: relative;
  top: 200px;
}
.center {
  flex: 1;
  position: relative;
  margin-bottom: 300px;
   background-color: #F6F6F6;
}
// .foot {
//   width: 100%;
//   height: 300px;
//   position: fixed;
//   z-index: 1;
//   bottom: 30px;
//   background: white;
// }
}
</style>